{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="41"/>
{% end block %}

{% block main %}
<div class="container">
    <ol class="breadcrumb">
        <li class="active">实验班级</li>
    </ol>
    
    <!-- 搜索表单开始 -->
    <div class="form-inline">
        <div class="form-group">
            <input type="text" id="coursename" placeholder="课程名称包含" class="form-control" />
        </div>
        <div class="form-group">
            <select class="form-control" id="status">
                <option value="1">进行中</option>
                <option value="0">已完结</option>
            </select>
        </div>
        <div class="form-group">
            <input type="date" id="startdate" placeholder="开课日期从" class="form-control" />
        </div>
        <div class="form-group">
            <input type="date" id="enddate" placeholder="到" class="form-control" />
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary" id="btnSearch">查询</button>
        </div>
    </div>
    <!-- 搜索表单结束 -->

    <!-- 查询结果开始 -->
    <table class="table table-striped table-bordered" >
        <caption>
            <h4><strong>查询结果</strong></h4>
            <ul class="pagination pagination-sm" style="float:left;">
                <li title="第一页"><a href="javascript:goFirst();">&laquo;</a></li>
                <li title="上一页"><a href="javascript:goPrev();">&lsaquo;</a></li>
                <li title="当前页" class="active"><a href="#" id="pageIndex">1</a></li>
                <li title="下一页"><a href="javascript:goNext();">&rsaquo;</a></li>
                <li title="最末页"><a href="javascript:goLast();">&raquo;</a></li>
                <li>
                    <a href="#">共<strong id="total">0</strong>条记录，<strong id="pageCount">0</strong>页</a>
                </li>
            </ul>
            <div style="float:right;padding:5px">
                <button class="btn btn-primary btn-sm" data-bind="click:$root.newClass">添加班级</button>
            </div>
        </caption>
        <thead>
            <tr>
                <th>班级名称</th>
                <th>实验课程</th>
                <th>开课日期</th>
                <th>结课日期</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody data-bind="foreach:search_classes">
            <tr>
                <td data-bind="text:classname"></td>
                <td data-bind="text:coursename"></td>
                <td data-bind="text:startdate"></td>
                <td data-bind="text:enddate"></td>
                <td data-bind="text:status()==1?'进行中':'已完结'"></td>
                <td>
                    <a class="btn btn-sm btn-primary" data-bind="attr:{href:'/class_classstudents?id=' + classid}">学生</a>
                    <a class="btn btn-sm btn-primary" data-bind="attr:{href:'/class_assignments?classid=' + classid + '&classname=' + escape(classname())}">作业</a>
                    <button type="button" class="btn btn-sm btn-warning" data-bind="click:$root.editClass">修改</button>
                    <button type="button" class="btn btn-sm btn-danger" data-bind="visible:status()==0, click:$root.deleteClass">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 对话框开始 -->
    <div id="dlg" class="modal fade" data-bind="with:selectedClass">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">实验班级信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-2">班级名称</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" data-bind="value:classname" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">关联课程</label>
                            <div class="col-md-10">
                                <select class="form-control" 
                                    data-bind="options:$root.courses(),optionsText:'coursename',optionsValue:'courseid',optionsCaption:'选择关联课程', value:courseid">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">开课日期</label>
                            <div class="col-md-10">
                                <input type="date" class="form-control" 
                                    data-bind="value:startdate"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">结课日期</label>
                            <div class="col-md-10">
                                <input type="date" class="form-control" 
                                    data-bind="value:enddate"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="code" class="control-label col-md-2">状态</label>
                            <div class="col-md-10">
                                <label class="radio-inline">
                                    <input type="radio" name="status" value="1" data-bind="checked:status,checkedValue:1"/>进行中
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" value="0" data-bind="checked:status,checkedValue:0"/>完结
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2">
                                <button type="button" class="btn btn-default" data-bind="click:$root.confirmClass">更新</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 对话框结束 -->
</div>
{% end block %}


{% block script %}
<script src='{{static_url("js/dateformat.js") }}'></script>

<script type="text/javascript">
    var total = 0;
    var pagecount = 1;

    var search_data = {
        coursename : "",
        status : 1,
        startdate : "",
        enddate : "",
        pageindex : 1,
        pagesize : 5
    };

    function LabClass(classid, classname, courseid, coursename, startdate, enddate, status){
        var self = this;
        self.classid = classid;
        self.classname = ko.observable(classname ? classname : "");
        self.courseid = ko.observable(courseid ? courseid : "");
        self.coursename = coursename;
        self.startdate = ko.observable(startdate ? startdate : new Date().format("yyyy-MM-dd"));
        self.enddate = ko.observable(enddate ? enddate : new Date().format("yyyy-MM-dd"));
        self.status = ko.observable(status == undefined ? 1 : status);
    }

    function Course(courseid, coursename){
        var self = this;
        self.courseid = courseid;
        self.coursename = coursename;
    }

    function ModelView(){
        var self = this;
        self.search_classes = ko.observableArray();
        self.courses = ko.observableArray();
        self.selectedClass = ko.observable();

        self.newClass = function(){
            self.selectedClass(new LabClass());
            $("#dlg").modal({ 'backdrop': 'static' });
        };
        self.editClass = function(){
            self.selectedClass(this);
            $("#dlg").modal({ 'backdrop': 'static' });
        };
        self.confirmClass = function(){
            obj = this;
            
            if (!obj.classname()){
                bootbox.alert("必须指定班级名称！");
            }
            if (!obj.courseid()){
                bootbox.alert("必须选择课程！");
                return;
            }
            
            url = obj.classid ? '/class_editclass' : '/class_newclass';
            type = obj.classid ? 'put' : 'post';
            data = {
                classid : obj.classid,
                classname : obj.classname(),
                courseid : obj.courseid(),
                startdate : obj.startdate(),
                enddate: obj.enddate(),
                status : obj.status()
            };
            $.ajax({
               url : url,
               type : type,
               data : JSON.stringify(data),
               dataType : 'json',
               success: function(result){
                    if(result.code == 'success'){
                        bootbox.alert('操作成功！', function(){
                            $("#dlg").modal('hide');
                            search();
                        });
                    } else{
                        bootbox.alert(result.message);
                    }
               }
            });
        };
        self.deleteClass = function(){
            classid = this.classid
            classname = this.classname();
            bootbox.confirm('确定要删除实验班级【' + classname + '】吗？', function(choice){
                if(choice){
                   $.ajax({
                    url :  '/class_deleteclass?id=' + classid,
                    type : 'delete',
                    dataType: 'json',
                    success : function(result){
                        if(result.code == 'success'){
                            bootbox.alert('删除成功！', function(){
                                $("#dlg").modal('hide');
                                search();
                            })
                        } else{
                            bootbox.alert(result.message);
                        }
                    }
                   });
                }
            });
        };
    }

    var modelView = new ModelView();
    ko.applyBindings(modelView);

    $(document).ready(function(){
        $.getJSON('/lab_getcourselist', function(results){
            var courses = [];
            for(var i=0;i<results.length;i++){
                var course = new Course(results[i].courseid, results[i].coursename);
                courses.push(course);
            }
            modelView.courses(courses);
            search();
        });

        $("#btnSearch").click(function(){
            search_data.coursename = $("#coursename").val();
            search_data.status = $("#status").val();
            search_data.startdate = $("#startdate").val();
            search_data.enddate = $("#enddate").val();
            search_data.pageindex = 1;
            search();
        });
    });

    function search(){
        $.ajax({
            url : '/class_classsearch',
            type : 'get',
            data : search_data, // 注意，get模式下使用JSON.stringify(search_data)无效
            dataType : 'json', 
            success : function(results){
                search_classes = [];
                for(var i=0;i<results.search_classes.length;i++){
                    item = results.search_classes[i];
                    search_classes.push(new LabClass(item.classid, item.classname, item.courseid, item.coursename,
                        item.startdate, item.enddate, item.status));
                }
                total = results.total;
                fillPagerInfo();
                modelView.search_classes(search_classes);
            }
        });
    }

    function fillPagerInfo(){
        $("#pageIndex").html(search_data.pageindex.toString());
        $("#total").html(total.toString());
        pagecount = Math.ceil(total / search_data.pagesize)
        $("#pageCount").html(pagecount.toString());
    }

    function goLast(){
        search_data.pageindex = pagecount;
        search();
    }
    function goFirst(){
        search_data.pageindex = 1;
        search();
    }
    function goPrev(){
        search_data.pageindex = search_data.pageindex > 1 ? search_data.pageindex - 1 : 1;
        search();
    }
    function goNext(){
        search_data.pageindex = search_data.pageindex < pagecount ? search_data.pageindex + 1 : pagecount;
        search();
    }
</script>
{% end block %}